
// The Tag List View =============================================

function refreshTagList (tagList) {
	
	// Step 1: Import data into gData
	gData.tagPool = {};	
	for (var i in tagList) {
		gData.tagPool[tagList[i][0]] = {};
		gData.tagPool[tagList[i][0]].numUnread = tagList[i][1];
	}

	var widget = document.createElement('div');
	var elContent;
	
	// Step 2: create default tags link
	widget.innerHTML = '';
	defaultTags = ['Inbox', 'Sent', '-'];
	for (var i in defaultTags) {
		elContent = document.createElement('div');
		// TODO: class?
		elContent.id = 'link.tag.' + defaultTags[i];
		widget.appendChild(elContent);
	}
	$('defaultTags').innerHTML = widget.innerHTML;

	// Step 3: create user tags link
	widget.innerHTML = '';
	for (var i in tagList) {
		if (tagList[i][0] == 'Inbox' ||
		    tagList[i][0] == 'Sent' ||
		    tagList[i][0] == '-')
			continue;

		elContent = document.createElement('div');
		// TODO: class?
		elContent.id = 'link.tag.' + tagList[i][0];
		widget.appendChild(elContent);
	}
	$('userTags').innerHTML = widget.innerHTML;

	// Render all the content
	for (var tagName in gData.tagPool)
		renderTagLink(tagName);
	
	return true;
}



// The most important part of the system
// The Message List
// =======================================================

function selectView (resource, page) {
	// UI Effect
	var rc = gData.currResource;	
	if (rc) {
		idx = rc.indexOf('#');
		if (idx >= 0) rc = rc.substring(0, idx);
		$('link.' + rc).className = 'tagLink';
	}

	// Select it
	gData.currResource = resource;
	gData.currPage = page;
	gData.openThread = -1;
		
	if (resource == 'star') {
		$('link.star').className = 'tagLinkSelected';		
		callJSON ('/ui/list/starMessages/' + page,
			  refreshMessageList);
	} else if (resource.substring(0, 3) == 'tag') {
		var tagName = resource.substring(4);
 		callJSON ('/ui/list/tagNumUnread/' + tagName,
 			  refreshTagNumUnread, tagName);
		callJSON ('/ui/list/tagMessages/' + tagName + '/' + page,
			  refreshMessageList);
	} else if (resource.substring(0, 6) == 'search') {
		var query = resource.substring(7);
		$('link.search').className = 'tagLinkSelected';		
		callJSON ('/ui/list/searchMessages/' + page + '?query=' + query,
			  refreshMessageList);		
	}
}

function selectNewer () {
	if (gData.currPage <= 0) return;
	selectView(gData.currResource, gData.currPage - 1);
}

function selectOlder () {
	selectView(gData.currResource, gData.currPage + 1);
}


function refreshTagNumUnread (num, tagName) {
	var data = gData.tagPool[tagName];
	data.numUnread = num;
	renderTagLink(tagName);
}
	

function refreshMessageList (thList) {	
	var tagName = gData.currResource.substring(4);
	var page = gData.currPage;	

	// Step 1: set data
	gData.currThreads = {};
	for (var i in thList) {
		var data = thList[i];
		gData.currThreads[data.threadID] = data;
	}


	// Step 2: Create the UI Framework;
	var widget = $('messageList');
	widget.innerHTML = '';
	
	for (var i in thList) {
		var data = thList[i];

		// TODO: also set the class
		var item = Widget('div',
				  'item.' + data.threadID);
		var title = Widget('div',
				   'item.' + data.threadID + '.title');
		if (i % 2 == 0)
			title.className = 'itemTitleOne';
		else
			title.className = 'itemTitleTwo';
		
		var content = Widget('div',
				     'item.' + data.threadID + '.content');
		content.style.display = 'none';		
		
		item.appendChild(title);
		item.appendChild(content);
		widget.appendChild(item);
	}

	for (var i = thList.length; i < 40; i++) {
		var item = Widget('div');
		if (i % 2 == 0)
			item.className = 'itemTitleOne';
		else
			item.className = 'itemTitleTwo';
		
		widget.appendChild(item);
	}

	// Now render all the link title
	for (var i in thList)
		renderMessageTitle(thList[i].threadID);
}


function initList () {
	callJSON ('/ui/list/tagList', refreshTagList);
	setTimeout(function () {selectView('tag.Inbox', 0)}, 200);
//	selectView('tag.Inbox', 0);
}

